<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>注册</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/main.css" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<style>
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 22%;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
				height: 0.9rem;
				font-size: 14px;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			#reg {
				padding: 10px;
				border-radius: 20px;
				width: 100%;
				margin: 0 auto;
				height: 0.9rem;
			}
			
			#reg span {
				font-size: 18px;
			}
			
			.mui-input-group {
				background: none;
			}
			
			.mui-input-group:before,
			.mui-input-group:after {
				height: 0;
			}
			
			.mui-input-group input {
				background-color: #FFFFFF !important;
				width: 95% !important;
				border-radius: 25px !important;
				margin: 10px 0 10px 0 !important;
				padding-left: 55px !important;
				float: inherit !important;
			}
			
			.mui-input-group .mui-input-row:after {
				height: 0;
			}
			
			.mui-input-group .mui-input-row {
				text-align: center;
			}
			
			.mui-input-group .mui-input-row {
				height: inherit;
			}
			
			p {
				font-size: 14px;
				margin-top: 20px;
				margin-bottom: 10px;
				color: #8f8f94;
			}
			
			p a {
				color: #000000;
				padding: 0 20px;
			}
			
			.mui-content {
				background: none;
			}
			
			#showUserPicker {
				float: inherit;
				width: 87%;
				padding: 10px 15px;
				background-color: #FFF !important;
			}
			
			#yanzhengBtn1 {
				position: absolute;
				top: 20px;
				right: 35px;
				background: #ffcc99;
				border: 0;
				border-radius: 20px;
			}
			
			.mui-input-group .labelL {
				position: absolute;
				top: 5px;
				left: -5px;
				z-index: 99;
			}
			
			.mui-input-group .labelL img {
				width: 0.4rem;
				vertical-align: -webkit-baseline-middle;
				padding-top: 10px;
			}
			
			.mui-input-group .labelR {
				position: absolute;
				top: 10px;
				right: 0px;
				z-index: 99;
			}
			
			.mui-input-group .labelR img {
				width: 0.3rem;
				vertical-align: -webkit-baseline-middle;
			}
			
			.mui-btn-primary {
				border: 1px solid #4d7acf;
				background: #4d7acf;
			}
			
			.size12 {
				position: absolute;
				top: 20px;
				right: 35px;
				background: #a7bad6;
				border: 0;
				border-radius: 20px;
				color: #ffffff;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">

				<div class="mui-input-row">
					<label class="labelL"><img src="../images/exit/yzm.png" /></label>
					<input id='nickname' name='nickname' type="text" class="mui-input" placeholder="请输入您的昵称">
				</div>
				<div class="mui-input-row">
					<label class="labelL"><img src="../images/exit/sj.png" /></label>
					<input id='account' name='account' type="number" class="mui-input" placeholder="请输入您的手机号码">
				</div>
				<div class="mui-input-row">
					<label class="labelL"><img src="../images/exit/yzm.png" /></label>
					<input id='vc' name='vc' type="number" class="mui-input " placeholder="请输入验证码"><button type="button" class="verification size12" id="yanzhengBtn">获取验证码</button></input>
				</div>
				<div class="mui-input-row">
					<label class="mui-pull-right labelL"><img src="../images/mm.png" /></label>
					<input id='setpassword' name='setpassword' type="password" class="mui-input password" placeholder="设置密码"></input>
				</div>
				<div class="mui-input-row">
					<label class="mui-pull-right labelL"><img src="../images/mm.png" /></label>
					<input id='doublepassword' name='doublepassword' type="password" class="mui-input password" placeholder="重复密码"></input>
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='reg' class="mui-btn mui-btn-block mui-btn-primary "><span>注册</span></button>
			</div>

		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/xiangyingshi.js"></script>
		<script src="../js/app.js"></script>
		<script type="text/javascript" src="../js/constants.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script type="text/javascript" src="../js/json_time.js"></script>
		<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
		<script type="text/javascript" src="../js/sharemethods.js"></script>
		<script>
			mui.init();
			mui.plusReady(function() {
				if(plus.navigator.isImmersedStatusbar()) { // 兼容immersed状态栏模式
					// 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置
					topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + 'px';
					document.querySelector("header").style.height = topoffset;
					document.querySelector("header").style.paddingTop = "20px";
					document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = topoffset;
				}

				plus.webview.currentWebview().setStyle({
					softinputMode: "adjustResize" // 弹出软键盘时自动改变webview的高度
				});
				var currentView = plus.webview.currentWebview();
				currentView.show('slide-in-right', 200);
				plus.nativeUI.closeWaiting();
				//倒计时
				var past_time = 0,
					begin_time = localStorage.getItem("begin_time"),
					daojishi_current = localStorage.getItem("miao");
				var daojishi2 = 60;
				console.log(daojishi_current != null && begin_time != null);
				if(daojishi_current != null && begin_time != null) {
					//获取存在本地的退出时间
					daojishi_current = localStorage.getItem("miao");
					console.log("lorg" + daojishi_current);
					//获取最开始时间
					begin_time = localStorage.getItem("begin_time");
					console.log("current" + begin_time);
					console.log(date_Time_minus(begin_time, daojishi_current));
					past_time = date_Time_minus(begin_time, daojishi_current).split(":")[0] * 60 + parseInt(date_Time_minus(begin_time, daojishi_current).split(":")[1]);
					console.log(past_time);
					daojishi2 = 60 - past_time;
					var daojishi_interval = setInterval(function() {
						if(daojishi2 > 0) {
							document.querySelector('#yanzhengBtn').innerHTML = daojishi2 + "秒";
							document.querySelector('#yanzhengBtn').setAttribute("class", "verification size12 mui-disabled");
							daojishi2--;
							//								console.log(date_All_format());
							localStorage.setItem("miao", date_All_format());
						} else {
							document.querySelector('#yanzhengBtn').innerHTML = "获取验证码";
							document.querySelector('#yanzhengBtn').setAttribute("class", "verification size12");
							document.querySelector("#reg").setAttribute("class", "mui-btn mui-btn-block mui-btn-primary");
							clearInterval(daojishi_interval);
							localStorage.clear();
							daojishi2 = 60;
							past_time = 0;
						}
					}, 1000);
				}

				//ajax请求
				$("#yanzhengBtn").on("click", function() {
					var phone = document.getElementById("account").value;
					var phone_validate = /1[3|5|7|8|]\d{9}/; //验证手机号码是否正确
					time_current = date_All_format();
					console.log("current" + time_current);
					localStorage.setItem("begin_time", date_All_format());
					if(phone == "") {
						mui.toast('请填写手机号')
						return false;
					}
					if(phone.length != 11) {
						mui.toast('手机号码位数不正确');
						return false;
					}
					if(!phone_validate.test(phone)) {
						mui.toast('手机号码错误');
						return false;
					}

					var uuid = plus.device.uuid;
					var sus = function(data) {
						if(data.sendRes == "success") {
							mui.toast("发送成功");
							var daojishi_interval = setInterval(function() {
								if(daojishi2 > 0) {
									document.querySelector('#yanzhengBtn').innerHTML = daojishi2 + "秒";
									document.querySelector('#yanzhengBtn').setAttribute("class", "verification size12 mui-disabled");
									daojishi2--;
									localStorage.setItem("miao", date_All_format());
								} else {
									document.querySelector('#yanzhengBtn').innerHTML = "获取验证码";
									document.querySelector('#yanzhengBtn').setAttribute("class", "verification size12");
									localStorage.clear();
									clearInterval(daojishi_interval);
									past_time = 0;
									daojishi2 = 60;
								};
							}, 1000);
						} else {
							mui.toast("发送失败，请稍候再试");
						}
					};

					url = srvcUrl + "?pn=" + phone + "&uid=" + uuid
					commonHttpUtils(url, "get", {}, sus, error);
				});

				//发送请求reg按钮的点击事件

				$("#reg").on("click", function() {
					var phone = document.getElementById("account").value.trim();
					var setpassword = document.getElementById("setpassword");
					var doublepassword = document.getElementById("doublepassword");
					var vc = document.getElementById("vc").value.trim();
					var nickname = document.getElementById("nickname").value.trim();
					if(!nickname) {
						mui.toast('请填写昵称')
						return false;
					}
					if(!vc) {
						mui.toast('请填写验证码')
						return false;
					}
					var phone_validate = /1[3|5|7|8|]\d{9}/; //验证手机号码是否正确
					if(!phone) {
						mui.toast('请填写手机号');
						plus.nativeUI.closeWaiting();
						return false;
					}
					if(phone.length != 11) {
						mui.toast('手机号码位数不正确');
						return false;
					}
					if(!phone_validate.test(phone)) {
						mui.toast('手机号码错误');
						return false;
					}

					if(setpassword.value == "" || doublepassword.value == "") {
						mui.toast("请填写密码");
						return false;
					} else if(setpassword.value != doublepassword.value) {
						mui.toast("两次密码填写不一致");
						return false;
					}

					var clientid = plus.push.getClientInfo().clientid;
					var uuid = plus.device.uuid;
					var os = plus.os.name;
					var obj = {
						os: os,
						uuid: uuid,
						clientid: clientid,
						phone: phone,
						vc: vc,
						password: setpassword.value,
						nickname: nickname
					}

					var sussess = function(data) {
						//服务器返回响应，根据响应结果，分析是否登录成功；
						if(data.result == "success") {
							mui.toast("注册成功,请实名认证");
							var loginsussess = function(data) {
								if(data.result == "success") {
									localStorage.setItem('ACCESSTOKEN', data.obj.access_token);
									localStorage.setItem('USERID', data.obj.id);
									localStorage.setItem('USER', JSON.stringify(data.obj.user));
									localStorage.setItem('PHONE', phone);
									var index = plus.webview.getLaunchWebview();
									index.reload(true);
									plus.webview.currentWebview().close("none");
									var webview = mui.openWindow({
										url: '../set/set_real_name.html',
										id: 'set_real_name.html',
										show: {
											aniShow: 'pop-in'
										},
										extras: {
											phone: phone //扩展参数
										}

									});
								} else {
									mui.toast(data.msg);
								}
							};
							commonHttpUtils(loginUrl, "post", obj, loginsussess, error); //*/
						} else if(data.result == "error" && data.code == 'U000001') {
							mui.toast("手机号已经注册过,请登录！");
						} else if(data.result == "error" && data.code == 'P000000') {
							mui.toast("手机验证码错误！");
						} else {
							mui.toast(data.msg);
						}
					};
					commonHttpUtils(appregisterUrl, "post", obj, sussess, error);
				});
			});
		</script>
	</body>

</html>